<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>默认宽度</title>
    <style>
        #d1 {
            height: 200px;
            /*如果给了宽度margin不影响，不给的话会有影响，影响width的值,width会是父元素宽度减去2margin*/
            margin: 50px;
            /*盒子依然是1804,因为margin影响，导致里面就算border还是1804，但是，内容区又变小了,1794*/
            border: 5px solid black;
            /*同理，内容区又变小了*/
            padding: 5px;
            /*总结，没写宽度，那么margin会影响盒子的宽度，而border,padding会影响内容区宽度*/

            /*加了width:400px; 盒子就是420*/
            /* width: 400px;*/
            background-color: skyblue;
        }
    </style>
</head>
<body>
<div>
    <img src="../../images/内容区.png">
</div>
<div id="d1">Lorem1111111111111111111111111111111 asdasd 12321 21321 123213 13123asdas asd</div>

</body>
</html>